<template>
  <el-container>
    <el-main>
      <el-row>
        <el-col :span="8">
          <el-form ref="section" label-width="80" label-position="top" :model="section">
            <el-form-item label="板块名称" prop="section" :rules="[ {required: true, message: '请输入板块名称', trigger: 'blur'} ]">
              <el-input v-model="section.section"></el-input>
            </el-form-item>
            <el-form-item label="板块类型" prop="type" :rules="[ {required: true, message: '请选择板块类型', trigger: 'blur'} ]">
              <el-radio v-model="section.type" :label="0">导航栏</el-radio>
              <el-radio v-model="section.type" :label="1">附加</el-radio>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="create">创 建</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import {create, update, get} from "@/api/section";

export default {
  name: "SectionUpdate",
  data () {
    return {
      section: {
        section: null,
        type: 0
      },
      page: {
        section: null
      },
      temp: {
        sectionIndex: null
      }
    }
  },
  methods: {
    create () {
      this.$refs['section'].validate((valid) => {
        if (valid) {
          create(this.section).then( res => {
            this.$router.replace({name: 'SectionList'})
            this.section = {
              section: null,
              subSection: null
            }
          }).catch( err => {
            console.log(err)
          })
        }
      });
    },
    update () {
      this.$refs['section'].validate((valid) => {
        if (valid) {
          update(this.section).then( res => {
            this.section = {
              section: null,
              subSection: null
            }
            this.$router.replace({name: 'SectionList'})
          }).catch( err => {
            console.log(err)
          })
        }
      });
    }
  },
  mounted() {
    get().then( res => {
      this.page.section = res.data;
    })
  }
}
</script>

<style scoped>

</style>
